<template>
  <div class="box-show">
    <div class="z gonggao">
      <div class="gg-left title">
        <div class="gg-title" style="text-align: left">
          <el-button type="primary" size="mini" @click="removeid()"
            ><i class="el-icon-plus"></i>新增分类</el-button
          >
        </div>
      </div>
      <div>
        <div class="block">
          <el-row>
            <el-col :span="8">
              <el-tree
                :props="props"
                :load="loadNode"
                lazy
                draggable
                default-expand-all
                node-key="id"
                @check-change="handleCheckChange"
                @node-drag-end="nodeDragEnd"
              >
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span>{{ node.label }}</span>
                  <span>
                    <el-button type="text" size="mini" @click="add(node, data)">
                      添加子分类
                    </el-button>
                    <el-button
                      type="text"
                      size="mini"
                      @click="click(node, data)"
                    >
                      编辑
                    </el-button>
                    <el-button type="text" size="mini" @click="del(node, data)"
                      >删除</el-button
                    >
                  </span>
                </span>
              </el-tree>
            </el-col>
            <el-col :span="10" :offset="4">
              <el-form ref="form" :model="form" label-width="80px" size="mini">
                <el-form-item
                  label="分类名"
                  prop="name"
                  :rules="[{ required: true, message: '分类名称不能为空' }]"
                >
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item v-if="fname" label="父级名称" prop="name">
                  <el-input v-model="fname" disabled=""></el-input>
                </el-form-item>
                <el-form-item
                  label="排序"
                  prop="sort"
                  :rules="[{ type: 'number', message: '排序必须为数字值' }]"
                >
                  <el-input v-model="form.sort"></el-input>
                </el-form-item>
                <el-form-item
                  label="分类图片"
                  prop="img"
                  style="text-align: left;"
                >
                  <el-upload
                    class="avatar-uploader"
                    action="/addons/up_depot/inc/web/public/Memory/uploadfile"
                    name="image"
                    :headers="headers"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                    accept=".jpg, .jpeg, .png, .gif"
                  >
                    <img
                      v-if="imgIsNull"
                      :src="fileUrl + form.img"
                      class="avatar"
                      style="height: 100px;width: 100px;border-radius: 5px"
                    />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
                <el-form-item label="简介" prop="en_name">
                  <el-input type="textarea" v-model="form.info"></el-input>
                </el-form-item>

                <el-form-item style="text-align: left">
                  <el-button
                    type="primary"
                    v-if="form.id"
                    @click="classify_save('form')"
                    >修改</el-button
                  >
                  <el-button
                    type="primary"
                    v-else
                    @click="classify_save('form')"
                    >添加</el-button
                  >
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  classify_getAllByFid,
  classify_getInfoById,
  memory_getFileUrl,
  memory_uploadfile,
  classify_del,
  classify_updateFidById,
  classify_save
} from "@/utils/do";
export default {
  name: "List",
  props: {},
  data() {
    return {
      form: {
        name: "",
        sort: 0,
        img: "",
        info: "",
        fid: 0
      },
      fname: "",
      fileUrl: "",
      imgIsNull: false,
      props: {
        label: "name",
        children: "zones"
      },
      count: 1,
      resData: [], // 子菜单渲染需要使用
      node_had: "",
      resolve_had: "",
      headers: { uniacid: 2 }
    };
  },
  components: {
    // 第三方组件实例化
  },
  computed: {},
  methods: {
    // 点击新增按钮
    removeid() {
      this.form = { name: "", sort: 0, img: "", info: "", fid: 0 };
      this.imgIsNull = false;
    },
    // 修改提交方法
    classify_save(form) {
      this.$store.commit("setIsLoading", true);
      let _this = this;
      let erro = _this.form.id ? "修改" : "新增";
      _this.$refs[form].validate(valid => {
        if (valid) {
          classify_save(_this.form, res => {
            _this.$store.commit("setIsLoading", false);
            if (res.code != 0) {
              _this.$message.error(res.msg);
              return;
            }
            _this.$alert(erro + "成功", "提醒", {
              confirmButtonText: "确定",
              callback: action => {
                console.log("点击了=", action);
                _this.$router.go(0);
              }
            });
          });
        }
      });
    },
    // 拖拽节点后触发
    nodeDragEnd(node, endnode, position, event) {
      let _ = this;
      console.log("节点拖拽之后=", node, endnode, position, event);
      classify_updateFidById(node.data.id, endnode.data.id, res => {
        console.log("修改父级分类结果", res);
        res.code != 0
          ? _.$message.error(res.msg)
          : _.$message.success("修改成功");
        _.$router.go(0);
      });
    },
    // 新增子分类
    add(node, data) {
      this.form = { name: "", sort: 0, img: "", info: "", fid: data.id };
      this.imgIsNull = false;
      this.fname = data.name;
    },
    //删除
    del(node, data) {
      console.log(node, data);
      let _ = this;
      _.$store.commit("setIsLoading", true);
      this.$confirm("是否确认删除该分类?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // 调用删除
          classify_del(data.id, res => {
            _.$store.commit("setIsLoading", false);
            console.log("删除返回值", res);
            res.code != 0
              ? _.$message.error(res.msg)
              : _.$message.success("删除成功");
          });
        })
        .catch(() => {});
    },
    isNull(a) {
      return a != null && a != undefined && a != "";
    },
    // 点击选中即可修改
    click(nide, data) {
      console.log("id", data.id);
      let _ = this;
      classify_getInfoById(data.id, res => {
        _.form = res.date;
        _.imgIsNull = _.isNull(_.form.img);
      });
    },
    getFileUrl() {
      let _ = this;
      memory_getFileUrl(res => {
        console.log("memory_getFileUrl", res);
        _.fileUrl = res.date;
      });
    },
    handleCheckChange(data, checked, indeterminate) {
      console.log("handleCheckChange=", data, checked, indeterminate);
    },
    handleNodeClick(data) {
      console.log("handleNodeClick=", data);
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        classify_getAllByFid(0, res => {
          return resolve(res.date);
        });
      } else {
        console.log("当前需要加载子目录的id", node.data.id);
        classify_getAllByFid(node.data.id, res => {
          return resolve(res.date);
        });
      }
    },
    // 图片上传
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      let _ = this;
      memory_uploadfile(file, res => {
        console.log(res);
        _.form.img = res.date;
        _.imgIsNull = true;
        _.$forceUpdate();
        console.log(_.fileUrl + _.form.img);
      });
      return false;
    }
  },
  mounted() {
    this.getFileUrl();
  }
};
</script>

<style scoped>
@import "~@/assets/scss/index.css";
</style>
